import { Link } from "react-router-dom";
import Icon, { PlayCircleOutlined } from "@ant-design/icons";

import "./styles.sass";
import { useDispatch } from "react-redux";
import { AppDispatch } from "@/shared/typicode/heroes";
import { heroesActions } from "@/entities/heroes/model";

export type HeroRowProps = {
  id: string;
  name: string;
};

// тут по клику навигация

export const HeroHistory = ({ id, name }: HeroRowProps) => {
  const dispatch = useDispatch<AppDispatch>();

  const handleClick = () => {
    dispatch(heroesActions["addHistory"]({ id, name }));
  };

  return (
    <Link to={`/${id}`} className="hero-history-row" onClick={() => handleClick()}>
      {name}
    </Link>
  );
};
